<template>
    <!-- vue3页面 -->
    
    <div>
        div-form
        <div class="one">
            <brother-one></brother-one>
        </div>
        <div class="two">
            <brother-two></brother-two>
        </div>
    </div>
</template>

<script  lang='ts'>
import { defineComponent, provide, reactive, ref,Ref } from 'vue'

import brotherOne from '@/components/brother/brotherOne.vue'
import brotherTwo from '@/components/brother/brotherTwo.vue'
export default defineComponent({
    name: 'fourOne',
    components: {
        brotherOne,
        brotherTwo
    },
    props:['content'],
    setup(props,context) {
        console.log(props,'props');
        let data1= ref('') 
        let data2= ref(false) 

        if(props.content){
            data1 = ref(props.content.data1)
            data2 = ref(props.content.data2)
            console.log(data1,'77777');
        }
        provide('data1',data1)
        provide('data2',data2)
        return {}
    }
})
</script>

<style scoped>
.one{
    margin: 20px;
    width: 800px;
    height: 200px;
    border: solid;
}
.two{
    margin: 20px;
    width: 800px;
    height: 200px;
    border: solid;
}
</style>